@import "../common/variables";

.J_nav {
  padding: 17px 0;
  position: fixed;
  top:0px;
  left: 0px;
  z-index: 100;
  .bg-cover{
    position: absolute;
    top:0px;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0.3;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    background: #000000;
  }
  .inner{
    position: relative;
  }
  .logo {
    margin-left: 20px;
  }
  .nav-menu {
    &>li{
      line-height: 35px;
      margin-right: 70px;
      float: left;
      color: #ffffff;
      font-size: $font-size-large;
      cursor: pointer;
      &>a,span{
        transition: all 0.5s;
        color: #fff;
      }
    }
    &>li.active{
      &>a, span{
        color: $text-color-active;
      }
      border-bottom: 2px solid $text-color-active;
    }
    &>li:hover{
      &>a,span{
        color: $text-color-active;
      }
    }
    // 子菜单
    li.nav-submenu {
      position: relative;
    }
    li.nav-submenu:hover {
      .J_nav_menu{
        opacity: 1;
        z-index: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
      }
    }
  }

}
.J_nav_menu {
  position: absolute;
  top: 56px;
  left: -69px;
  width: 180px;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  transition: all 0.5s;
  transform: translate3d(0, 10px, 0);
  li{
    width: 100%;
    position: relative;
    a{
      display: block;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      font-size: $font-size-normal;
      &:hover{
        color: #fff;
        background: $bg-color-main;
      }
    }
  }
  .bg-cover{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  }
  &:before{
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: -56px;
    width: 100%;
    height: 66px;
  }
}
